<template>
  <div id="selection-lhfp">
    <header-top :option="headerOption"></header-top>
    <div class="lhfp">
      <div class="lhfp-top">
      <img :src="bannerPic">
      </div>
      <div class="lhfp-contentTitle" v-text='contentTitle'></div>
      <div class="lhfp-tip">
        <span class="lhfp-tip-time" >{{releaseTime}}</span>
        <span class="lhfp-tip-writer">作者: <span class="lhfp-tip-writer-span" >{{authorName}}</span></span>
      </div>
      <hr>
      <div class="lhfp-content" v-html="mainContent"  >
      </div>
      <div class="lhfp-blank">
      </div>
      <div class="lhfp-jianyi">
        <table class="lhfp-jianyi-title" >
          <tr>
            <td><div class="lhfp-jianyi-left" ></div></td>
            <td>老何建议</td>
          </tr>
        </table>
        <div class="lhfp-jianyi-content" v-text="recommended">
        </div>
      </div>
      <div class="lhfp-bottom">
        <div class="lhfp-bottom-line"></div>
        <div class="mianze">免责条款</div>
        <div class="bottom-tip">以上摘录、分析的内容不保证没有疏漏，只为投资者提供更多信息，并不构成任何投资建议或意见，据此操作，风险自负。</div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from 'components/HeaderTop'
  import Constant from 'common/constant'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import $ from 'jquery'

  export default {
    name: 'LHFP',
    data () {
      return {
        headerOption: {
          title: '老何复盘',
          leftBtn: Constant.leftBtn.BACK,
          operations: [Constant.operation.SHARE],
          page:Constant.page.LHFP,
          shareurl: 'https://dl.app.gtja.com/nrng/share/share.lhfp.html?templetContentUrl='+this.$route.query.templetContentUrl
        },
        userCode: '',
        nickname: '',
        bannerPic:'',
        authorName:'',
        releaseTime:'',
        mainContent:'',
        recommended:'',
        contentTitle:''
      }
    },

    created: function () { // created里不直接写业务代码，统一调用methods里的方法
      this.initEvent()
    },

    components: {
      'header-top': HeaderTop
    },

    methods:{
      initEvent(){
        this.beforeRender(),
        this.getDate()
      },
      beforeRender(){
        this.nickName=LocalDAO.getNickname();
        if(this.nickName!="") this.userCode=LocalDAO.getUserCode();
      },

      getDate(){
        var self=this;
        var lhfpUrl=window.location.href;
        var laohefupanURL=this.$route.query.templetContentUrl;
        $.ajax({
          async:true,
          url:laohefupanURL,
           // url: "https://dl.app.gtja.com/operation/config/niurenniugu/templateContent/laohe/laohefuoanTempletContent.json",
          type: "GET",
          dataType: 'jsonp',
          jsonpCallback: "laoheContent",
          success: function (response) {
            self.laoheContent(response);
          },
          error: function(xhr,status){

          },
        });
      },

      laoheContent(json){
          this.bannerPic=json.bannerPic;
          this.authorName=json.authorName;
          this.releaseTime=json.releaseTime;
          this.contentTitle=json.contentTitle;
          this.mainContent=json.mainContent;
          this.recommended=json.recommended;
          //内容换行
          if (this.mainContent.indexOf("\n")>= 0) {
            this.mainContent = this.mainContent.replace(/(\n(?=(\n+)))+/g,"<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
          }else {
            console.log("没有换行符");
          }
          var lhRecommended=LocalDAO.getLhfpRecommended();
          lhRecommended=this.recommended;
          LocalDAO.setLhfpRecommended(lhRecommended);
      }

    }
  }
</script>


<style scoped>
  .lhfp{
    width: 100%;
  }

  .lhfp .lhfp-top img{
    width: 100%;
  }
  .lhfp .lhfp-contentTitle{
    font-size: 14px;
    text-align: right;
    color: #D1CEBD;
    margin-top: -28px;
    margin-right: 10px;
    z-index: 999;
  }
  .lhfp .lhfp-tip{
    margin-top: 18px;
    margin-bottom: -10px;
    color: #999;
    font-size: 12px;
  }
  .lhfp .lhfp-tip-time{
    margin-left: 25px;
  }
  .lhfp .lhfp-tip-writer{
    float: right;
    margin-right: 25px;
  }
  .lhfp .lhfp-content{
    margin-top:-10px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    /*text-align: center;*/
    font-size: 16px;
    color: #565656;
    text-indent: 2em;
  }
  .lhfp .lhfp-blank{
    height: 11px;
    background-color: #F1F3F6;
  }
  .lhfp .lhfp-jianyi-title{
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
  }
  .lhfp .lhfp-jianyi-left{
    width: 4px;
    height: 13px;
    background-color: #31A7F1;
    margin-right: 5px;
  }
  .lhfp .lhfp-jianyi-content{
    color:#33A9F4 ;
    font-size:16px ;
    margin-left: 15px;
    margin-bottom: 15px;
  }
  .lhfp .lhfp-bottom{
    background-color:#E7E7E7 ;
    text-align: center;
    padding-top: 20px;
  }
  .lhfp .lhfp-bottom .mianze{
    width: 20%;
    height: 29px;
    font-size:15px ;
    color: #565656;
    margin-left: 40%;
    margin-bottom: 5px;
    margin-top: -10px;
    z-index: 999;
    background-color: #E7E7E7;
  }
  .lhfp .lhfp-bottom-line{
    background-color: #565656;
    width: 40%;
    margin-left: 30%;
    height: 1px;
    margin-top: 5px;
  }
  .lhfp .lhfp-bottom .bottom-tip{
    color:#565656 ;
    font-size: 12px;
    width: 88%;
    margin-left: 6%;
    padding-bottom: 18px;
  }

  /*share*/
  .lhfpshare{
    padding-top: 0 !important;
  }
</style>
